<template>
    <div style="width:100%;border-bottom:1px solid #a0a0a0">
    <p class="h-header">排行榜</p>
    <hr style="border-top:2px solid #ff8a1f;margin-bottom:10px"/>
    <div style="width:100%;display:flex;margin-bottom:20px">
      <div class="t-item" style="width:950px">
        <p>播放TOP
          <span class="p-all" style="padding:5px 10px" @click="playAllItems($event, topData)">
            播放全部
            <i class="el-icon-video-play"></i>
          </span>
          <span class="p-more" @click="$router.push({path:'/itemhot'})">更多</span>
        </p>
        <div class="t-row" 
          :class="getMenu.fileid == item.fileid ? 'colorS' : ''"
          v-for="(item, index) in topData" 
          :key=index
          @mouseenter="pickItem($event, index)"
          @mouseleave="loseItem($event, index)"
          @dblclick="playOne($event, item)"
          >
          <span style="width:30px;float:left">{{index + 1}}</span>
          <span style="width:450px;float:left">{{item.artist}} - {{item.name}}</span>
          <span :class="item.icon || getMenu.fileid == item.fileid ? 's-hover' : 's-normal' "
            style="width:330px;float:left;font-size:11px">
            {{item.album}}
          </span>
          <item-ctrl 
            v-if="item.icon || getMenu.fileid == item.fileid" 
            :item=item 
            style="width:135px;float:left;margin-left:5px"/>
          <span v-else style="width:135px;float:left;text-align:center">
            {{stringTime(item.timelength / 1000)}}
          </span>
        </div>
        <menu-list v-if="getMenuStat"/>
      </div>  
      <div class="t-item" style="width:290px">
        <p>分享TOP</p>
        <div style="heigh:30px;line-height:30px;float:left;width:100%;display:block" 
          v-for="(val, index) in topUser" 
          :class="[{'color1':index == 0},{'color2':index == 1},{'color3':index == 2}]"
          :key=index>
          <span style="width:25px;float:left">{{index + 1}}</span>
          <span style="float:left">{{val.uname}}</span>
          <span style="float:right;width:50px;text-align:right">{{val.count}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { addAnimation } from '@/api/tool'
import MenuList from '@/components/Menulist' // 导出按钮组件
import ItemCtrl from '@/components/ItemCtrl'
import { stringTime } from '@/utils/util'
import { mapGetters, mapMutations } from 'vuex'
import { playAll, playItem, addItem } from '@/api/event'
import { getTopListService, getTopShareService } from '@/api/music'

export default {
  name:"top-list",
  components: {
    ItemCtrl,
    MenuList
  },
  data() {
    return {
      animation:false,
      topUser:[],
      topData:[],
    };
  },
  computed:{
    ...mapGetters(['getMenu', 'getMenuStat']),
  },
  destroyed() {
    this.setMenuHit(false)
  },
  created() {
    this.getTop()
    this.getShare()
  },
  methods: {
    ...mapMutations(['setMenuHit']),
    stringTime,
    playOne(e, item) {
      e.stopPropagation()

      addAnimation(this, e, () => {
        playItem(this, item)
      })
    },
    playAllItems(e, items) {
      if (this.animation) return
      // e.preventDefault()
      e.stopPropagation()
      this.animation = true
      items.forEach((item, idx) => {
        setTimeout(() => {
          if (idx == 0) {
            addAnimation(this, e, () => {
              playItem(this, item)
            })
          } else {
            addAnimation(this, e, () => {
              addItem(this, item)
            })
          }
        }, 50 * (idx + 1))
      })

      setTimeout(() => {
        this.animation = false
      }, 500)  
    },
    async getTop() {
      const resp = await getTopListService({limit:10})
      if (!resp || 0 !== resp.result) {
        this.errorMsg = resp.message
        return
      }

      this.topData = resp.data.map(item => {
        return {
          ...item,
          icon: false,
          collect:false,
        }
      })
    },
    async getShare() {
      const resp = await getTopShareService({limit:10})
      if (!resp || 0 !== resp.result) {
        this.errorMsg = resp.message
        return
      }

      this.topUser = resp.data
    }, 
    pickItem(e, index) {
      this.topData.forEach((item, idx) => {
        if (+idx == +index) {
          item.icon = true
        } else {
          item.icon = false
        }
      })
    },
    loseItem() {
      this.topData.forEach((item, idx) => {
        item.icon = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-header {
    text-align:left;
    font-size:24px;
    font-weight:600;
    margin-bottom:10px;
    // margin-top:10px;
  }

  .t-item {
    float:left;
    text-align:left;
    margin:10px 10px 0px 20px;
    p {
      font-size:18px;
      font-weight:500;
      margin-bottom:20px;
      height:30px;
      line-height: 30px;
    }
    .t-row {
      height:30px;
      line-height:30px;
      float:left;
      width:100%;
      display:block;
      font-size:14px;
      color:#000;

      .s-hover {
        color:#409EFF;
      }

      .s-normal{
        color:#808080;
      }

      span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .t-row:hover {
      color:#409EFF !important; 
    }

   .p-all {
      font-size:13px;
      margin-left:30px;
      cursor:pointer;
      font-weight: 500;
      border:1px solid #afafaf;
      border-radius: 3px;
    }

    .p-more {
      font-size:13px;
      cursor:pointer;
      float:right;
      margin-right:50px;
    }

    .p-more:hover,
    .t-row:hover,
    .p-all:hover {
      color:#409EFF; 
    }
  }

  .colorS {
    color:#409EFF !important; 
  }

  .color0 {
    color:#000;
  }

  .color1 {
    color:red;
  }

  .color2 {
    color:#ef502a;
  }

  .color3 {
    color:#c23f0c;
  }

</style>